<template>
  <section>
    <template v-if="isWechat">
      <section style="background:#888785" :style="{height: currentHeight + 'px'}" @click="isWechat = false">
        <img style="width:100%;" src="@/assets/imgs/guide.jpg" alt="">
      </section>
    </template>

    <template v-else>
      <section class='f-share'>
        <img style="width:100%;height:374px" src="@/assets/imgs/share_h5_pic1.png" alt="">

        <div class="f-center f-mt-05">
          <van-button type="primary" @click="download" :loading="loading ">
            <span style="padding:15px 99px">下载 淏咖宝APP</span>
          </van-button>
        </div>

        <section class="f-card" v-if="shopName">
          <img style="width:184px;height:22px;margin:13px 77px" src="@/assets/imgs/share_h5_pic2.png" alt="">
          <ul class="f-user">
            <li>
              <p>店铺名称：</p>
              <p>{{shopName}}</p>
            </li>
            <li>
              <p>店铺联系人：</p>
              <p>{{contactsName}}</p>
            </li>
            <li class="f-mt-10">
              <p>登录账号：</p>
              <p>{{loginAccount}}</p>
            </li>
            <li class="f-mt-10">
              <p>登录密码：</p>
              <p>{{firstPassword}}</p>
            </li>
          </ul>
          <p class="f-tip">温馨提示：为了您的账户安全，请登录后及时更改登录密码。</p>
        </section>

        <img class="f-mt-15" style="width:343px;height:336px" src="@/assets/imgs/share_h5_pic3.png" alt="">

        <div class="f-text">
          <p>如需使用淏咖宝网页版，请复制链接地址粘贴到电脑浏览器打开：</p>
        </div>

        <section class="f-url">
          <p class="f-pl-10" style="font-size: 10px;color: #4B67E2;">{{url}}</p>
          <div class="f-btn" @click="handleCopy(url)">复制</div>
        </section>
      </section>
    </template>

  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import { successDeal, getUrlParam, getUrlKey, warningDeal, locationDownLoad } from '@/utils/utils';
import axios from "axios";
import { showLoadingToast, closeToast } from 'vant';


export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      loading: false,
      url: 'https://jihehao.yilianyun.top/distribution_web/#/',
      isWechat: false,
      currentHeight: "",
      OS_TYPE: null,

      shopName: "",
      contactsName: "",
      loginAccount: "",
      firstPassword: ""
    })

    onMounted(() => {
      state.currentHeight = window.innerHeight

      state.shopName = getUrlKey('shopName')
      state.contactsName = getUrlKey('contactsName')
      state.loginAccount = getUrlKey('loginAccount')
      state.firstPassword = getUrlKey('firstPassword')
    })

    const download = () => {
      state.isWechat = isWeichatFn()
      if (!state.isWechat) {
        getUserAgent().then(type => {
          if (type == 1) {
            showLoadingToast({
              forbidClick: true,
              duration: 0,
            });
            axios({
              url: `${location.origin}/mnc/w/package/last`,
              data: {
                'packageName': 'com.borya.promotion'
              },
              method: 'post'
            }).then(res => {
              if (res.data.code == 200) {
                locationDownLoad(res.data.data.filepath)
              } else {
                warningDeal(res.data.msg)
              }
              setTimeout(() => {
                closeToast()
              }, 1000)
            }).catch(err => {
              closeToast()
            })
          }
        })
      }
    }

    // 判断是否在微信内
    function isWeichatFn() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
      } else {
        return false;
      }
    }

    // 判断终端类型
    const getUserAgent = () => {
      return new Promise((resolve, reject) => {
        let u = navigator.userAgent;
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 || u.indexOf('ANDROID') > -1; // android终端
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
        /**
         * 1 安卓
         * 2 IOS
         * 3 PC
         */
        if (isAndroid) {
          resolve(1)
        } else if (isiOS) {
          resolve(2)
        } else {
          resolve(3)
        }
      })
    }

    function handleCopy(value) {
      const input = document.createElement('input');
      document.body.appendChild(input);
      input.setAttribute('value', value);
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        successDeal('复制成功！')
      }
      document.body.removeChild(input);
    }

    return {
      ...toRefs(state),
      handleCopy,
      download
    }
  }
}
</script>
<style lang='scss' scoped>
.f-share {
  background: #add5fe;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 36px;
  .f-card {
    margin-top: 21px;
    width: 338px;
    height: 132px;
    background: #ffffff;
    border-radius: 10px;
    .f-user {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      //   padding: 0 18px;
      font-size: 11px;
      li {
        display: flex;
        color: #000000;
        width: 50%;
        p:first-child {
          color: #666666;
          width: 73px;
          text-align: right;
        }
      }
    }
    .f-tip {
      color: #ff2b2b;
      font-size: 10px;
      padding: 0 18px;
      margin-top: 15px;
    }
  }
  .f-text {
    font-size: 10px;
    color: #000000;
    margin: 20px 0 8px 0;
    width: 331px;
  }
  .f-url {
    width: 331px;
    height: 31px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .f-btn {
      width: 55px;
      height: 31px;
      background: #4b67e2;
      color: #ffffff;
      font-size: 12px;
      line-height: 31px;
      text-align: center;
    }
  }
}
</style>